<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link href="css/layer.css" rel="stylesheet">
    <script type="text/javascript" src="js/layer.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/echarts.js"></script>

    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=bfMD5ZedpZdGzqw7XxNjPKSmjqygarjH&__ec_v__=20190126"></script>

    <script type="text/javascript" src="js/bmap.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

    <title>共享单车在线租还预测平台</title>
</head>
<body style="height: 100%;width: 100%;margin: 0">
<div id="fbtn">
    <button type="button" class="btn btn-danger" onclick="dataHandle()">模型构建</button>
    <button type="button" class="btn btn-info" onclick="clearAll()">清除绘制</button>
</div>
<div id="map-wrap" style="height:760px;width:100%;">
    <!-- 这里渲染地图 -->
</div>

</body>

<script>

    var myData = [];
    var lines = $.ajax({
        type: "get",
        url: "http://127.0.0.1:14028/webgis/playdayod/get/od/"+"01",
        dataType : 'json',
        async: false,
        success: function (data) {
            myData = data;
        },
        error: function (data) {
            console.info("失败"+data);
        }
    })

    $('#map-wrap').width($('#map-wrap').width());
    $('#map-wrap').height($('#map-wrap').height());

    var bmapChart = echarts.init(document.getElementById('map-wrap'),'light');

    // var myData = [
    //
    //     {name: '海门', value: [121.15, 31.89, 1]},
    //     {name: '鄂尔多斯', value: [109.781327, 39.608266, 1]},
    //     {name: '招远', value: [120.38, 37.35, 1]},
    //     {name: '舟山', value: [122.207216, 29.985295, 1]}
    // ];

    var option = {
        bmap: {
            center: [118.727201,32.021921], // 中心位置坐标
            zoom: 13, // 地图缩放比例
            roam: true, // 开启用户缩放
            mapStyle: {
                'styleJson': [
                    {
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'land',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#f3f3f3'
                        }
                    }, {
                        'featureType': 'railway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fdfdfd'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'poi',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'green',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'subway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'manmade',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'local',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'boundary',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'building',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'label',
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#999999'
                        }
                    }
                ]
            }
        },
        visualMap: {	// 视觉映射组件
            type: 'continuous',
            min: 0,
            max: 24,
            calculable: true,
            inRange: {
                color: ['#50a3ba', '#eac736', '#d94e5d']
            },
            textStyle: {
                color: '#fff'
            }
        },
        series: [
            {
                name: '时间',
                type: 'scatter',
                coordinateSystem: 'bmap', // 坐标系使用bmap
                data: myData
            }
        ]
    };

    bmapChart.setOption(option);

    var bmap = bmapChart.getModel().getComponent('bmap').getBMap(); // 百度地图实例
    bmap.addControl(new BMap.NavigationControl()); // 缩放控件
    bmap.addControl(new BMap.ScaleControl()); // 比例尺
    bmap.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件

    var styleOptions = {
        strokeColor:"red",    //边线颜色。
        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(bmap, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 5), //偏离值
        },
        circleOptions: styleOptions, //圆的样式
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        rectangleOptions: styleOptions //矩形的样式
    });

    var overlays = [];
    var overlaycomplete = function(e){
        overlays.push(e.overlay);
    };
    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);

    // 清空绘制区域
    function clearAll() {
        for(var i = 0; i < overlays.length; i++){
            bmap.removeOverlay(overlays[i]);
        }
        overlays.length = 0
    }


    function dataHandle() {
        layer.closeAll();
        layer.load();
        setTimeout(function(){
            layer.closeAll('loading');
            open();
        }, 2000);
    }
    function open() {
        layer.open({
            type: 2,
            title: '构建预测模型',
            area: ['1300px', '700px'],
            fixed: false, //不固定
            shade: 0.5,
            maxmin: true,
            content: 'model.html',
            zIndex: layer.zIndex,
            success: function(layero){
                layer.setTop(layero); //重点2
            }
        })
    }

</script>

<style>
    #fbtn {
        position: fixed;
        left: 100px;
        top: 100px;
        z-index: 1;
    }
</style>
</html>